<template>
  <div>
    <!-- 头部组件 -->
    <div class="header">
      <Header />
    </div>
    <!-- 折线图 -->
    <lineContent />
    <div class="box">
      <!-- 信息栏 -->
      <el-card class="box-left">
        <bar />
      </el-card>
      <!-- 饼图 -->
      <el-card>
        <pie />
      </el-card></div>
  </div>
</template>

<script>
// 引入图表
import bar from './components/bar.vue'
import pie from './components/pie.vue'
import Header from './components/header.vue'
import lineContent from './components/content.vue'
export default {
  components: {
    bar,
    pie,
    Header,
    lineContent
  },
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.header{
  // width: 1200px;
  margin-top: 20px;
  margin: 0 auto;
}
.box{
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  .box-left{
    width: 550px;
  }
}

</style>
